<template>
	<view class="container">
		<!-- 生命体征设备 -->
		<view v-if="deviceInfo.device_id == 12">
			<view class="flex-y-center" @click="showEdit = true">
				<text class="font-36 text-bold m-r-10">{{deviceInfo.name}}</text>
				<image :src="deviceInfo.logo_img!==null?$util.img(deviceInfo.logo_img):$util.img('image/health/edit.png')" mode="" class="edit"></image>
			</view>
			<view class="infos flex-between">
				<view class="">
					<view class="flex">
						<view class=" name  text-bold m-b-10 color-title2 m-r-20" @click="checkReal()">
							实时监测
						</view>
					</view>
					<view>
						<text class="font-24 m-r-10">设备状态</text>
						<text class="font-24 c-bb">{{deviceInfo.online_status==1?'在线':'离线'}}</text>
					</view>
				</view>
				<image :src="deviceInfo.logo_img?$util.img(deviceInfo.logo_img):$util.img('image/health/life.png')" mode="" class="watchimg"></image>
			</view>
			<view class="options-main">
				<view class="options" @click="setNetwork()">
					配置网络
				</view>
				<view class="options on" @click="delDevice()">
					删除
				</view>
			</view>
		</view>
		
		<!-- 防摔倒 -->
		<view v-if="deviceInfo.device_id == 13">
			<view class="flex-y-center" @click="showEdit = true">
				<text class="font-36 text-bold m-r-10">{{deviceInfo.name}}</text>
				<image :src="$util.img('image/health/edit.png')" mode="" class="edit"></image>
			</view>
			<view class="infos flex-between">
				<view class="">
					<view>
						<text class="font-24 m-r-10">信号强度</text>
						<text class="font-24 color-title2 m-r-40">{{infoDa.signal_value}}{{infoDa.signal_value_unit}}</text>
						<text class="font-24 m-r-10">设备状态</text>
						<text class="font-24 c-bb">{{deviceInfo.online_status==1?'在线':'离线'}}</text>
					</view>
				</view>
				<image :src="deviceInfo.logo_img?$util.img(deviceInfo.logo_img):$util.img('image/health/life2.png')" mode="" style="width: 220rpx;height: 234rpx;"></image>
			</view>
			<view class="options-main">
				<view class="options" @click="setNetwork()">
					配置网络
				</view>
				<view class="options green" @click="$util.redirectTo('/otherpages/health/messageSet?id='+id)">
					短信通知
				</view>
				<view class="options on" @click="delDevice()">
					删除
				</view>
			</view>
		</view>

		<!-- SOS设置 -->
			<view class="flex-y-center" @click="showEdit = true" v-if="deviceInfo.device_id !== 12 && deviceInfo.device_id !== 13">
				<text class="font-36 text-bold m-r-10">{{deviceInfo.name}}</text>
				<image :src="$util.img('image/health/edit.png')" mode="" class="edit"></image>
			</view>
			<view class="infos flex-between" v-if="deviceInfo.device_id !== 12 && deviceInfo.device_id !== 13">
				<view class="">
					<view class="rel font-44 text-bold m-b-10">
						{{infoDa.power_value}}{{infoDa.power_value_unit}}
						<text class="abline"></text>
					</view>
					<view class="font-24 c-78 m-b-20">剩余电量</view>
					<view>
						<text class="font-24 m-r-10">信号强度</text>
						<text class="font-24 color-title2 m-r-40">{{infoDa.signal_value}}{{infoDa.signal_value_unit}}</text>
						<text class="font-24 m-r-10">设备状态</text>
						<text class="font-24 c-bb">{{deviceInfo.online_status==1?'在线':'离线'}}</text>
					</view>
				</view>
				<image :src="deviceInfo.logo_img!==null?$util.img(deviceInfo.logo_img):$util.img('image/health/life3.png')" mode="" style="width: 252rpx;height: 252rpx;"></image>
			</view>
			<view class="options-main" v-if="deviceInfo.device_id !== 12 && deviceInfo.device_id !== 13">
				<view class="options" @click="$util.redirectTo('/otherpages/health/equipmentSet?id='+id)" v-if="deviceInfo.device_id == 10">
					绑定联系人
				</view>
				<view class="options green" @click="$util.redirectTo('/otherpages/health/messageSet?id='+id)" v-else>
					短信通知
				</view>
				<view class="options on" @click="delDevice()">
					删除
				</view>
			</view>
		
		
		<!-- <view class="flex-center m-t-70">
			<view class="c-a4 name">重启设备</view>
		</view> -->
		
		<edit-equipment-name ref="equipmentName" :show="showEdit" @close="closePop" @confirm="confirm"></edit-equipment-name>
		
	</view>
</template>

<script>
	import editEquipmentName from '../../components/editEquipmentName/editEquipmentName.vue'
	export default {
		components: {
			editEquipmentName
		},
		data() {
			return {
				profile: [],
				deviceInfo: {
					device_id: 0,
				},
				showEdit: false,
				id: 0,
				infoDa: {
					power_value: '--',
					power_value_unit: '%',
					signal_value: '--',
					signal_value_unit: 'dBm',
				},
			}
		},
		onLoad(data) {
			if(data.id) {
				this.id = data.id;
				this.getDetail()
			}
			

		},
		methods: {
			// 每隔四分钟请求一次数据
			startRequestData() {
				this.$api.sendRequest({
					url: "/api/userHealth/getData",
					data: {
						id: this.id,
					},
					success: res => {
							if(res.code == 0) {
									this.getOnlineData()
							}else {
								this.$util.showToast({title: res.message});
							}
						}
						
				})
			},
			// 每隔15秒请求一次数据
			getOnlineData() { 
				this.$api.sendRequest({
					url: "/api/userHealth/getBodyData",
					data: {
						id: this.id,
					},
					success: res => {
							if(res.code == 0) {
								

							}else {
								this.$util.showToast({title: res.message});
							}
						}
						
				})
			},
			checkReal() {
				if(this.deviceInfo.online_status == 0) {
					this.$util.showToast({title: '设备离线，无法查看实时数据'});
					return;
				}
				this.$util.redirectTo('/otherpages/health/realTimeMonitor?id='+this.id)
			},
			setNetwork() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '本次添加的设备包含wifi设备，是否开始配网操作，配网前请确保设备已通电',
					confirmText: '开始配网',
					cancelText: '取消',
					confirmColor: '#ff8f33',
					success: function (res) {
						if (res.confirm) {
							// 跳转到蓝牙页面
							uni.setStorageSync('mac_code', that.deviceInfo.mac_code);
							that.$util.redirectTo('/otherpages/health/networkSet')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			closePop() {
				this.showEdit = false
			},
			confirm(e) {
				this.$api.sendRequest({
					url: "/api/userHealth/changeDeviceName",
					data: {
						id: this.id,
						name: e
					},
					success: res => {
							if(res.code == 0) {
									this.$util.showToast({title: '修改成功'});
									this.showEdit = false;
									this.$refs.equipmentName.name = '';
									this.getDetail()

							}else {
									this.$util.showToast({title: res.message});
							}
						}
						
				})
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceInfo",
			      data: {
					id: this.id,
				  },
			      success: res => {
			        if(res.code == 0) {
						this.deviceInfo = res.data;
						uni.setNavigationBarTitle({
							title: res.data.name
						});

						// 整合返回的param数据，先判断是否存在，在判断长度，如果长度为0，则不显示该模块
						let param = res.data.param;
						if(param && param.length > 0) {
							// 过滤数组里面的电量和信号强度，这两个单独赋值给额外字段数据
							for(let i = 0; i < param.length; i++) {
								if(param[i].name == '电量') {
									this.infoDa.power_value = param[i].value;
									this.infoDa.power_value_unit = param[i].unit;
								}else if(param[i].name == '信号强度') {
									this.infoDa.signal_value = param[i].value;
									this.infoDa.signal_value_unit = param[i].unit;
								}else {
									this.profile.push(param[i]);
								}
							}
						}
						
						if(this.deviceInfo.device_id == 12) {
							this.startRequestData()
						}	

			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			delDevice() {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该设备吗？',
				    success: function(res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.$api.sendRequest({
							  url: "/api/userHealth/delDevice",
							  data: {id: that.id},
							  success: res => {
										if(res.code == 0) {
												that.$util.showToast({title: '删除成功'});
												uni.navigateBack();
										}else {
												that.$util.showToast({title: res.message});
										}
									}
									
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	
.container {
	padding: 24rpx 40rpx;
}
.edit {
	width: 36rpx;
	height: 36rpx;
}
.watchimg {
	width: 270rpx;
	height: 200rpx;
}

.name {
	text-decoration: underline; /* 添加下划线 */
}
.options-main {
	margin: 40rpx 0 20rpx;
	.options {
			display: inline-block;
			height: 52rpx;
			width: 160rpx;
			line-height: 52rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 24rpx;
			border: 1px solid $color-title2;
			color: $color-title2;
		}
		.on {
			border: 1px solid #FF2B3F;
			color: #FF2B3F!important;
		}
		.green {
			border: 1px solid #00D075;
			color: #00D075!important;
		}
	
}
</style>
